<template>
    <section>
        <h2>质检标准</h2>
        <el-form ref="myForm" label-width="100px" :model="formData">
            <el-row>
                <el-col :sm="12" :md="8" :lg="6">
                    <el-form-item label="编号" prop="id">
                        <el-input v-model="formData.id" />
                    </el-form-item>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <el-form-item label="物料名称" prop="name">
                        <el-input v-model="formData.name" />
                    </el-form-item>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <el-form-item label="型号" prop="type">
                        <el-option label="" value=""></el-option>
                        <el-select v-model="formData.type" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-button type="primary" @click.prevent="handleQuery(1)" native-type="submit">查询</el-button>
                <el-button @click="handleReset()" native-type="button">重置</el-button>
                <el-button type="primary" native-type="button" @click="insertVisible = true">新增</el-button>
            </el-row>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column v-for="item in tableColumns" :prop="item.prop" :label="item.label" width="180"
                :key="item.prop">
            </el-table-column>
            <el-table-column label="操作">
              <template scope="scope">
                <el-button @click="handleUpdate(scope.row)" type="primary" size="small">修改</el-button>
                <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formData.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="formData.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>

        <zjbc-insert :dialogTableVisible="insertVisible" @close="handleInsertClose" @success="handleSuccess"></zjbc-insert>
        <zjbc-update :dialogTableVisible="updateVisible" :row="updateRow" @close="handleUpdateClose" @success="handleSuccess"></zjbc-update>
    </section>
</template>

<script>
import ZjbcInsert from '@/components/admin/zjbc/ZjbcInsert.vue';
import ZjbcUpdate from '@/components/admin/zjbc/ZjbcUpdate.vue';
// import request from "@/util/request";

export default {
    components: {ZjbcInsert,ZjbcUpdate},
    data() {
        return {
            formData: {
                id: "",
                name: "",
                type: "",
                // 分页条件：查询页数
                currentPage: 1,
                // 分页条件：每页行数
                pageSize: 20
            },
            options: [
                {
                    label: "大",
                    value: "1"
                },
                {
                    label: "中",
                    value: "2"
                },
                {
                    label: "小",
                    value: "3"
                }
            ],
            tableColumns: [
                {
                    prop: "id",
                    label: "编号"
                },
                {
                    prop: "name",
                    label: "物料名称"
                },
                {
                    prop: "type",
                    label: "型号"
                },
                {
                    prop: "size",
                    label: "规格"
                },
                {
                    prop: "unit",
                    label: "单位"
                },
                {
                    prop: "check_project",
                    label: "检验项目"
                },
                {
                    prop: "check_type",
                    label: "检验类型"
                },
                {
                    prop: "max",
                    label: "标准值上限"
                },
                {
                    prop: "min",
                    label: "标准值下限"
                },
            ],
            tableData: [],
            // 总行数，后端返回
            total: 0,
            insertVisible: false,
            updateVisible: false,
            updateRow: null,
        }
    },
    methods: {
        handleQuery(page) {
            this.formData.currentPage = page;
            // request({
            //     url: "",
            //     method: "get",
            //     // get请求参数通过params传递，POST请求参数通过data传递
            //     params: this.formData
            // }).then(res => {
            //     console.log(res);
            // })
            // console.log("我查询了:",page)
            // : 
            setTimeout(() => {
                const temp = [];
                // 模拟获取到后端返回的总行数
                this.total = 725;
                for (let i = 0; i < this.formData.pageSize; i++) {

                    temp.push({
                        id: page * this.formData.pageSize + i,
                        name: "名称" + i,
                        type: "型号" + i,
                        size: "规格" + i,
                        unit: "单位" + i,
                        check_project: "检验项目" + i,
                        check_type: "检验类型" + i,
                        max: "标准值上限" + i,
                        min: "标准值下限" + i,
                    })
                }
                this.tableData = temp;

            }, 1500)
        },
        handleReset() {
            this.$refs.myForm.resetFields();
            this.handleQuery(1);
        },
        // 每页行数变化
        handleSizeChange(pageSize) {
            this.formData.pageSize = pageSize;
            this.handleQuery(1);
        },
        // 当前页数变化
        handleCurrentChange(currentPage) {
            this.handleQuery(currentPage);
        },
        handleInsertClose() {
            this.insertVisible = false;
        },
        handleUpdateClose() {
            this.updateVisible = false;
        },
        // 处理增加成功
        handleSuccess() {
            this.insertVisible = false;
            this.updateVisible = false;
            this.handleReset();
        },
        handleUpdate(row) {
            // console.log("row = ",row);
            this.updateRow = row;
            this.updateVisible = true;
        }
    }
}
</script>

<style></style>